<template>
  <div class="MobilePhone-box">
    <img
      src="./../../assets/images/my/MobilePhone-left-arrow.jpg"
      alt=""
      class="left-arrow-img"
      @click="FnReturn()"
    />
    <img src="./../../assets/images/my/MobilePhone-logo.jpg" alt="" class="logo-img" />
    <div class="MobilePhone-text">100%纯在线商城</div>
    <div class="save-money">买车纯在线，多快好省钱</div>
    <input type="text" class="MobilePhone-user" placeholder="请输入手机号" />
    <input
      type="password"
      class="MobilePhone-password"
      placeholder="请输入验证码"
    />
    <div class="MobilePhone-login active">登录</div>
    <div class="MobilePhone-password-login" style="display:none">密码登录</div>
    <div class="MobilePhone-password-login">
        <div class="short-message">短信验证码登录</div>
        <div class="forget-password" @click="FnRouter()">忘记密码</div>
    </div>
    <div class="MobilePhone-agreement">
      <input type="checkbox" class="tui-checkbox" />
      我已阅读并同意
      <div class="MobilePhone-agreement-text">《用户注册协议》</div>
      和
      <div class="MobilePhone-agreement-text">《隐私政策》</div>
    </div>
  </div>
</template>
<script>
export default {
    methods:{
        FnRouter(){
            this.$router.push("Register")
        },
        FnReturn(){
            this.$router.push("OneClickLogin")
        }
    }
}
</script>
<style lang="less" scoped>
.MobilePhone-box {
  width: 698px;
  height: 100vh;
  padding-left: 52px;
  background: #fff;
  overflow: hidden;
  .left-arrow-img {
    width: 21px;
    height: 38px;
    margin-top: 40px;
    margin-bottom: 66px;
    display: block;
  }
  .logo-img {
    width: 281px;
    height: 39px;
    display: block;
    margin-bottom: 51px;
  }
  .MobilePhone-text {
    width: 698px;
    height: 58px;
    line-height: 58px;
    color: #575757;
    font-size: 58px;
    margin-bottom: 39px;
  }
  .save-money {
    width: 698px;
    height: 26px;
    font-size: 26px;
    line-height: 26px;
    color: #2c2c2c;
    margin-bottom: 73px;
  }
  .MobilePhone-user,
  .MobilePhone-password {
    width: 698px;
    height: 124px;
    outline: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f6f6f6;
    display: block;
  }
  .MobilePhone-user,
  .MobilePhone-password::placeholder {
    font-size: 36px;
  }
  .MobilePhone-login {
    width: 646px;
    height: 94px;
    background: #feeee1;
    border-radius: 10px;
    color: #ffffff;
    text-align: center;
    line-height: 94px;
    font-size: 30px;
    margin-top: 41px;
    margin-bottom: 45px;
  }
  .MobilePhone-password-login {
    width: 698px;
    height: 27px;
    font-size: 27px;
    line-height: 27px;
    margin-bottom: 559px;
    color: #4f4f4f;
    display: flex;
    .short-message{
        margin-right: 340px;
    }
  }
  .MobilePhone-agreement {
    width: 671px;
    height: 30px;
    padding-left: 27px;
    color: #c5c5c5;
    display: flex;
    font-size: 22px;
    line-height: 26px;
    .MobilePhone-agreement-text{
        color: #000;
    }
    //设置选中背景
    .tui-checkbox:checked {
      background: #1673ff;
    }
    //设置复选框样式
    .tui-checkbox {
      width: 25px;
      height: 25px;
      background-color: #ffffff;
      border: solid 1px #dddddd;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      font-size: 0.8rem;
      margin: 0;
      padding: 0;
      margin-right: 14px;
      position: relative;
      display: inline-block;
      vertical-align: top;
      cursor: default;
      -webkit-appearance: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-transition: background-color ease 0.1s;
      transition: background-color ease 0.1s;
    }
    //设置伪类，即显现的对勾样式
    .tui-checkbox:checked::after {
      content: "";
      top: 5px;
      left: 5px;
      position: absolute;
      background: transparent;
      border: #fff solid 2px;
      border-top: none;
      border-right: none;
      height: 6px;
      width: 10px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
  }
}
</style>